<!DOCTYPE html>
<html lang="en">

<head>
    <title>录制视频</title>

    <script src="/themes/plugins/media/MediaStreamRecorder.js"></script>
    <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
    <script src="/themes/plugins/media/gumadapter.js"></script>
    <link rel="stylesheet" href="/themes/plugins/media/style.css">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <style>
        input {
            border: 1px solid rgb(46, 189, 235);
            border-radius: 3px;
            font-size: 1em;
            outline: none;
            padding: .2em .4em;
            width: 60px;
            text-align: center;
        }
        select {
            vertical-align: middle;
            line-height: 1;
            padding: 2px 5px;
            height: auto;
            font-size: inherit;
            margin: 0;
        }
    </style>
</head>

<body>
<article>

    <div class="github-stargazers"></div>

    <section class="experiment" style="padding: 5px;">
        <input type="text" style="display: none" id="time-interval" value="500000">

        <select id="video-recorderType" style="font-size:22px;vertical-align: middle;margin-right: 5px;display: none">
            <option value="[Best Available Recorder]">[Best Available Recorder]</option>
            <option value="MediaRecorder API">MediaRecorder API</option>
            <option value="WebP encoding into WebM">WebP encoding into WebM</option>
        </select>

        <br>
        <br>

        <button id="start-recording">开始</button>
        <button id="stop-recording" disabled>停止</button>

        <button id="pause-recording" disabled>暂停</button>
        <button id="resume-recording" disabled>继续</button>

        <button id="save-recording" style="display: none" disabled>Save</button>

        <br>
        <br>

        <label for="video-width">Video Width:</label>
        <input type="text" id="video-width" value="320">

        <label for="video-height">Video Height:</label>
        <input type="text" id="video-height" value="240">
    </section>

    <section class="experiment">
        <div id="videos-container">
        </div>
    </section>
    <script>
        function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
            navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
        }
        var mediaConstraints = {
            audio: !IsOpera && !IsEdge, // record both audio/video in Firefox/Chrome
            video: true
        };
        document.querySelector('#start-recording').onclick = function() {
            this.disabled = true;
            captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
        };
        document.querySelector('#stop-recording').onclick = function() {
            this.disabled = true;
            mediaRecorder.stop();
            mediaRecorder.stream.stop();
            document.querySelector('#pause-recording').disabled = true;
            document.querySelector('#start-recording').disabled = false;
        };
        document.querySelector('#pause-recording').onclick = function() {
            this.disabled = true;
            mediaRecorder.pause();
            document.querySelector('#resume-recording').disabled = false;
        };
        document.querySelector('#resume-recording').onclick = function() {
            this.disabled = true;
            mediaRecorder.resume();
            document.querySelector('#pause-recording').disabled = false;
        };
        document.querySelector('#save-recording').onclick = function() {
            this.disabled = true;
            mediaRecorder.save();
            // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
        };
        var mediaRecorder;
        function onMediaSuccess(stream) {
            var video = document.createElement('video');
            var videoWidth = document.getElementById('video-width').value || 320;
            var videoHeight = document.getElementById('video-height').value || 240;
            video = mergeProps(video, {
                controls: true,
                muted: true,
                width: videoWidth,
                height: videoHeight,
                src: URL.createObjectURL(stream)
            });
            video.play();
            videosContainer.appendChild(video);
            videosContainer.appendChild(document.createElement('hr'));
            mediaRecorder = new MediaStreamRecorder(stream);
            mediaRecorder.stream = stream;
            var recorderType = document.getElementById('video-recorderType').value;
            if (recorderType === 'MediaRecorder API') {
                mediaRecorder.recorderType = MediaRecorderWrapper;
            }
            if (recorderType === 'WebP encoding into WebM') {
                mediaRecorder.recorderType = WhammyRecorder;
            }
            // don't force any mimeType; use above "recorderType" instead.
            // mediaRecorder.mimeType = 'video/webm'; // video/webm or video/mp4
            mediaRecorder.videoWidth = videoWidth;
            mediaRecorder.videoHeight = videoHeight;
            mediaRecorder.ondataavailable = function(blob) {
                var a = document.createElement('a');
                a.target = '_blank';
                a.innerHTML = 'Open Recorded Video No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);
                a.href = URL.createObjectURL(blob);
                videosContainer.appendChild(a);
                videosContainer.appendChild(document.createElement('hr'));
            };
            var timeInterval = document.querySelector('#time-interval').value;
            if (timeInterval) timeInterval = parseInt(timeInterval);
            else timeInterval = 5 * 1000;
            // get blob after specific time interval
            mediaRecorder.start(timeInterval);
            document.querySelector('#stop-recording').disabled = false;
            document.querySelector('#pause-recording').disabled = false;
            document.querySelector('#save-recording').disabled = false;
        }
        function onMediaError(e) {
            console.error('media error', e);
        }
        var videosContainer = document.getElementById('videos-container');
        var index = 1;
        // below function via: http://goo.gl/B3ae8c
        function bytesToSize(bytes) {
            var k = 1000;
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            if (bytes === 0) return '0 Bytes';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
            return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        }
        // below function via: http://goo.gl/6QNDcI
        function getTimeLength(milliseconds) {
            var data = new Date(milliseconds);
            return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
        }
        window.onbeforeunload = function() {
            document.querySelector('#start-recording').disabled = false;
        };
    </script>

</body>

</html>